<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="68px">
            <el-form-item label="店铺名称" prop="name">
                <el-input
                    v-model="queryParams.name"
                    placeholder="请输入店铺名称"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="餐厅地址" prop="address">
                <el-input
                    v-model="queryParams.address"
                    placeholder="请输入餐厅地址"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input
                    v-model="queryParams.phone"
                    placeholder="请输入联系电话"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="送餐标识" prop="egress">
                <el-select v-model="queryParams.egress" placeholder="请选择送餐标识" clearable>
                    <el-option
                        v-for="dict in dict.type.hmy_shop_egress"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="营业状态" prop="openStatus">
                <el-select v-model="queryParams.openStatus" placeholder="请选择营业状态" clearable>
                    <el-option
                        v-for="dict in dict.type.hmy_shop_open_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="营业标识" prop="isOpen">
                <el-select v-model="queryParams.isOpen" placeholder="请选择营业标识" clearable>
                    <el-option
                        v-for="dict in dict.type.hmy_shop_is_open"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="审核标识" prop="passed">
                <el-select v-model="queryParams.passed" placeholder="请选择审核标识" clearable>
                    <el-option
                        v-for="dict in dict.type.hmy_shop_passed"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="店铺状态" prop="shopStatus">
                <el-select v-model="queryParams.shopStatus" placeholder="请选择店铺状态" clearable>
                    <el-option
                        v-for="dict in dict.type.hmy_shop_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="申请状态" prop="applyStatus">
                <el-select v-model="queryParams.applyStatus" placeholder="请选择申请状态" clearable>
                    <el-option
                        v-for="dict in dict.type.hmy_shop_apply_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['hmy:shops:add']"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['hmy:shops:edit']"
                >修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['hmy:shops:remove']"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['hmy:shops:export']"
                >导出
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="shopsList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="商户ID" align="center" prop="shopId" fixed/>
            <el-table-column label="店铺名称" align="center" prop="name" fixed/>
            <el-table-column prop="icon" label="店铺logo" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.icon != null">
                        <el-button
                            type="success"
                            plain
                            @click="previewimg(baseUrl+scope.row.icon)"
                            ref="btn"
                            size="mini"
                        >
                            预 览
                        </el-button>
                    </div>
                    <div v-else>暂无资源</div>
                </template>
            </el-table-column>
            <el-table-column prop="businessLicenseImage" label="营业执照图片" align="center" width="120">
                <template slot-scope="scope">
                    <div v-if="scope.row.businessLicenseImage != null">
                        <el-button
                            type="success"
                            plain
                            @click="previewimg(baseUrl+scope.row.businessLicenseImage)"
                            ref="btn"
                            size="mini"
                        >
                            预 览
                        </el-button>
                    </div>
                    <div v-else>暂无资源</div>
                </template>
            </el-table-column>
            <el-table-column prop="cateringServiceLicenseImage" label="服务许可证图片" align="center" width="120">
                <template slot-scope="scope">
                    <div v-if="scope.row.cateringServiceLicenseImage != null">
                        <el-button
                            type="success"
                            plain
                            @click="previewimg(baseUrl+scope.row.cateringServiceLicenseImage)"
                            ref="btn"
                            size="mini"
                        >
                            预 览
                        </el-button>
                    </div>
                    <div v-else>暂无资源</div>
                </template>
            </el-table-column>
            <el-table-column prop="serverScore" label="服务评分" align="center" width="150">
                <template slot-scope="scope">
                    <el-rate
                        :value="scope.row.serverScore"
                        disabled
                        show-score
                        text-color="#ff9900">
                    </el-rate>
                </template>
            </el-table-column>
            <el-table-column prop="environment" label="环境评分" align="center" width="150">
                <template slot-scope="scope">
                    <el-rate
                        :value="scope.row.environment"
                        disabled
                        show-score
                        text-color="#ff9900">
                    </el-rate>
                </template>
            </el-table-column>
            <el-table-column prop="hygiene" label="卫生评分" align="center" width="150">
                <template slot-scope="scope">
                    <el-rate
                        :value="scope.row.hygiene"
                        disabled
                        show-score
                        text-color="#ff9900">
                    </el-rate>
                </template>
            </el-table-column>
            <el-table-column label="餐厅地址" align="center" prop="address" show-overflow-tooltip/>
            <el-table-column label="餐厅公告" align="center" prop="publication" show-overflow-tooltip/>
            <el-table-column label="服务理念" align="center" prop="aim" show-overflow-tooltip/>
            <el-table-column prop="introduction" label="餐厅简介(视频)" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.introduction">
                        <el-button
                            type="success"
                            plain
                            @click="playVideo(baseUrl+scope.row.introduction)"
                            ref="btn"
                            size="mini"
                        >
                            播 放
                        </el-button>
                    </div>
                    <div v-else>暂无视频</div>
                </template>
            </el-table-column>
            <el-table-column label="营业时间" align="center" prop="openingHours"/>
            <el-table-column label="联系电话" align="center" prop="phone" width="120"/>
            <el-table-column label="店铺分类" align="center" prop="category" width="150"/>
            <el-table-column label="销售数量" align="center" prop="salesCount"/>
            <el-table-column label="送餐标识" align="center" prop="egress">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.hmy_shop_egress" :value="scope.row.egress"/>
                </template>
            </el-table-column>
            <el-table-column label="配送费" align="center" prop="deliveryFee"/>
            <el-table-column label="起送价" align="center" prop="serviceFee"/>
            <el-table-column label="所在市" align="center" prop="city" width="200"/>
            <el-table-column label="营业状态" align="center" prop="openStatus" fixed width="120">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.hmy_shop_open_status" :value="scope.row.openStatus"/>
                </template>
            </el-table-column>
            <el-table-column label="营业标识" align="center" prop="isOpen" fixed="right">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.hmy_shop_is_open" :value="scope.row.isOpen"/>
                </template>
            </el-table-column>
            <el-table-column label="投诉次数" align="center" prop="complaintCount"/>
            <el-table-column label="审核标识" align="center" prop="passed" fixed="right">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.hmy_shop_passed" :value="scope.row.passed"/>
                </template>
            </el-table-column>
            <el-table-column label="店铺状态" align="center" prop="shopStatus" fixed="right">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.hmy_shop_status" :value="scope.row.shopStatus"/>
                </template>
            </el-table-column>
<!--            <el-table-column label="申请状态" align="center" prop="applyStatus" fixed="right">-->
<!--                <template slot-scope="scope">-->
<!--                    <dict-tag :options="dict.type.hmy_shop_apply_status" :value="scope.row.applyStatus"/>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column label="未通过原因" align="center" prop="message" width="100"/>
            <el-table-column label="总交易额" align="center" prop="totalAmount" width="100"/>
            <el-table-column label="未结算金额" align="center" prop="unliquidatedAmount" width="100"/>
            <el-table-column label="平台收取费率" align="center" prop="platformRate" width="100"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="400">
                <template slot-scope="scope">
                    <el-button v-show="scope.row.passed == 1" type="primary" size="small"
                               @click="handleAudit(scope.row)"
                               v-hasPermi="['hmy:shops:edit']"
                    >审核
                    </el-button>
                    <el-button type="warning" size="small"
                               @click="handleCheck(scope.row)"
                               v-hasPermi="['hmy:shops:remove']"
                    >结算
                    </el-button>
                    <el-button type="danger" size="small"
                               @click="handleStop(scope.row)"
                               v-hasPermi="['hmy:shops:remove']"
                    >启用
                    </el-button>
                    <el-button type="success" size="small"
                               @click="handleViewFood(scope.row)"
                               v-hasPermi="['hmy:shops:remove']"
                    >查看菜单
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加或修改商户信息对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="商家登录帐号" prop="loginName">
                            <el-input v-model.number="form.loginName" maxLength="11" placeholder="请输入商家登录帐号" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商家登录密码" prop="loginPwd">
                            <el-input v-model="form.loginPwd" type="password" maxlength="20" placeholder="请输入商家登录密码"
                                      show-password clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="店铺名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入店铺名称" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="phone">
                            <el-input v-model.number="form.phone" maxLength="11" clearable placeholder="请输入联系电话"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="餐厅地址" prop="address">
                            <el-input v-model="form.address" placeholder="请输入餐厅地址" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="店铺logo" prop="icon">
                            <image-upload v-model="form.icon" :limit="1"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="营业执照图片" prop="businessLicenseImage">
                            <image-upload v-model="form.businessLicenseImage" :limit="1"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="服务许可证图片" prop="cateringServiceLicenseImage">
                            <image-upload v-model="form.cateringServiceLicenseImage"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="餐厅简介(视频)" prop="introduction">
                            <image-upload v-model="form.introduction" :fileSize="20" :fileType="uploadVideo"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="餐厅公告" prop="publication">
                            <el-input v-model="form.publication" type="textarea" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="服务理念" prop="aim">
                            <el-input v-model="form.aim" type="textarea" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="店铺分类">
                            <el-cascader
                                :options="categoryOptions"
                                v-model="selectedCategory"
                                :props="{ label: 'name',value: 'name' }"
                                clearable
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="送餐标识" prop="egress">
                            <el-select v-model="form.egress" placeholder="请选择送餐标识" clearable>
                                <el-option
                                    v-for="dict in dict.type.hmy_shop_egress"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="营业时间" prop="openingHours">
                            <el-time-select
                                placeholder="起始时间"
                                v-model="form.startTime"
                                :picker-options="{
                    start: '05:30',
                    step: '00:15',
                    end: '23:30'
                }">
                            </el-time-select>
                            <el-time-select
                                placeholder="结束时间"
                                v-model="form.endTime"
                                :picker-options="{
                                    start: '05:30',
                                    step: '00:15',
                                    end: '23:30',
                                    minTime: form.endTime
                                    }">
                            </el-time-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="配送费" prop="deliveryFee">
                            <el-input-number v-model="form.deliveryFee" :min="0" :max="20" placeholder="请输入配送费"
                                             clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="起送价" prop="serviceFee">
                            <el-input-number v-model="form.serviceFee" :min="0" :max="800" placeholder="请输入起送价"
                                             clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="地图位置坐标" prop="location">
                            <el-input v-model="form.location" placeholder="请输入地图位置坐标"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="商铺审核"
            :visible.sync="audit.show"
            width="30%">
            <el-input
                type="textarea"
                :autosize="{minRows: 4, maxRows: 4}"
                placeholder="请输入拒绝原因"
                v-model="audit.auditRemark">
            </el-input>
            <span slot="footer" class="dialog-footer">
            <el-button type="danger" @click="handleAuditConfirm(0)">拒绝</el-button>
            <el-button type="primary" @click="handleAuditConfirm(2)">通过</el-button>
          </span>
        </el-dialog>
        <el-dialog
            title="视频预览"
            :visible.sync="dialogPlay" width="30%"
            @close="closeDialog">
            <video
                :src="videoUrl"
                controls
                autoplay
                class="video"
                ref="dialogVideo"
                width="100%"
            ></video>
        </el-dialog>
        <el-image-viewer
            v-if="dialogimg"
            :on-close="()=>{dialogimg=false}"
            :url-list="imgUrl"/>
    </div>
</template>
<style>
.video-avatar {
    width: 148px;
    height: 148px;
    display: block;
}
</style>
<script>
import {listShops, getShops, delShops, addShops, updateShops} from "@/api/hmy/shops";
import {listCategories} from "@/api/hmy/categories";
import Treeselect from "@riophae/vue-treeselect";

export default {
    name: "Shops",
    dicts: ['hmy_shop_apply_status', 'hmy_shop_open_status', 'hmy_shop_status', 'hmy_shop_egress', 'hmy_shop_is_open', 'hmy_shop_passed'],
    components: {
        'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 子表选中数据
            checkedHmyShopsInfo: [],
            // 非单个禁用
            single: true,
            videoUrl: "",
            audit: {show: false, auditRemark: ''},
            dialogPlay: false,
            dialogimg: false,
            imgUrl: [],
            selectTable: {},
            // 非多个禁用
            multiple: true,
            baseUrl: process.env.VUE_APP_BASE_API,
            uploadVideo: ["mp4", "avi", "mov"],
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            categoryOptions: [],
            selectedCategory: ['快餐便当', '简餐'],
            // 商户信息表格数据
            shopsList: [],
            // 商户详情表格数据
            hmyShopsInfo: {},
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: null,
                address: null,
                phone: null,
                category: null,
                egress: null,
                city: null,
                openStatus: null,
                isOpen: null,
                passed: null,
                shopStatus: null,
                applyStatus: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                loginName: [
                    {required: true, message: "商家登录帐号不能为空", trigger: "blur"},
                    {type: 'number', message: '电话号码必须是数字'}
                ],
                loginPwd: [
                    {required: true, message: "商家登录密码不能为空", trigger: "blur"}
                ],
                name: [
                    {required: true, message: "店铺名称不能为空", trigger: "blur"}
                ],
                icon: [
                    {required: true, message: "店铺logo不能为空", trigger: "blur"}
                ],
                businessLicenseImage: [
                    {required: true, message: "店铺logo不能为空", trigger: "blur"}
                ],
                cateringServiceLicenseImage: [
                    {required: true, message: "店铺logo不能为空", trigger: "blur"}
                ],
                introduction: [
                    {required: true, message: "店铺logo不能为空", trigger: "blur"}
                ],
                phone: [
                    {required: true, message: '请输入联系电话'},
                    {type: 'number', message: '电话号码必须是数字'}
                ],
                address: [
                    {required: true, message: "餐厅地址不能为空", trigger: "blur"}
                ],
            }
        };
    },
    created() {
        this.initData();
        this.getList();
    },
    methods: {
        /** 查询商户信息列表 */
        getList() {
            this.loading = true;
            listShops(this.queryParams).then(response => {
                this.shopsList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        playVideo(url) {
            this.dialogPlay = true;
            this.videoUrl = url;
        },
        closeDialog() {
            this.videoUrl = ""; //清空数据 关闭视频播放
        },
        previewimg(imgs) {
            this.imgUrl = [imgs];
            this.dialogimg = true;
        },
        initData() {
            listCategories(this.queryParams).then(response => {
                this.categoryOptions = this.handleTree(response.data, "id", "pid");
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                shopId: null,
                loginName: null,
                loginPwd: null,
                name: null,
                icon: null,
                businessLicenseImage: null,
                cateringServiceLicenseImage: null,
                serverScore: null,
                environment: null,
                hygiene: null,
                address: null,
                selectedCategory: ['快餐便当', '简餐'],
                publication: null,
                aim: null,
                introduction: null,
                openingHours: null,
                phone: null,
                category: null,
                salesCount: null,
                egress: null,
                deliveryFee: null,
                serviceFee: null,
                speedScore: null,
                province: null,
                city: null,
                location: null,
                openStatus: null,
                isOpen: null,
                complaintCount: null,
                passed: null,
                shopStatus: null,
                applyStatus: null,
                delFlag: null,
                message: null,
                totalAmount: null,
                unliquidatedAmount: null,
                platformRate: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null
            };
            this.hmyShopsInfo = {};
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.shopId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加商户信息";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const shopId = row.shopId || this.ids
            getShops(shopId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改商户信息";
            });
        },
        /** 审核按钮操作 */
        handleAudit(row) {
            const shopId = row.shopId || this.ids
            getShops(shopId).then(response => {
                this.audit.auditRemark = '';
                this.audit.show = true;
                this.selectTable = response.data;
            });
        },
        handleAuditConfirm(state) {
            if (state == "0") {
                if (this.audit.auditRemark == '') {
                    this.$message({
                        type: 'warning',
                        message: '请输入拒绝原因'
                    })
                    return
                }
            }
            this.selectTable.passed = state;
            this.selectTable.message = this.audit.auditRemark;
            updateShops(this.selectTable).then(response => {
                this.$message({
                    type: 'success',
                    message: '审核成功'
                })
                 this.getList();
            })
            this.audit.show = false
        },
        /** 结算按钮操作 */
        handleCheck(row) {

        },
        /** 停用/启用 按钮操作 */
        handleStop(row) {

        },
        /** 查看菜单按钮操作 */
        handleViewFood(row) {

        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.hmyShopsInfo = this.hmyShopsInfo;
                    Object.assign(this.form, {
                        category: this.selectedCategory.join('/')
                    })
                    console.log("form============>", this.form);
                    if (this.form.shopId != null) {
                        updateShops(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addShops(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const shopIds = row.shopId || this.ids;
            this.$modal.confirm('是否确认删除商户信息编号为"' + shopIds + '"的数据项？').then(function () {
                return delShops(shopIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {
            });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('hmy/shops/export', {
                ...this.queryParams
            }, `shops_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
